<template>
    <div>
        <div>
            <el-form ref="searchForm" :inline="true" :model="condition.search" label-suffix="" label-width="100px"
                     size="small" label-position="left">
                <el-row>
                    <el-col>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <el-table
            id="mainTable"
            :data="tableData"
            size="small"
            header-cell-class-name="tableHeaderStyle"
            :row-class-name="tableRowClassName">
            <el-table-column label="序号" width="60">
                <template v-slot="scope">
                    <span>{{ (condition.page - 1) * condition.rows + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="agentId"
                width="80px"
                label="AGENT_ID">
            </el-table-column>
            <el-table-column
                prop="permanentCode"
                width="100px"
                label="永久授权码">
                <template v-slot="scope">
                    <table-popover :text=scope.row.permanentCode></table-popover>
                </template>
            </el-table-column>
            <el-table-column
                prop="suiteName"
                label="应用名称">
            </el-table-column>
            <el-table-column
                prop="type"
                :formatter="formatType"
                label="应用类型">
            </el-table-column>
            <el-table-column
                prop="accessToken"
                label="AT">
                <template v-slot="scope">
                    <table-popover :text=scope.row.accessToken></table-popover>
                </template>
            </el-table-column>
            <el-table-column
                prop="accessTokenExpiryTime"
                width="100px"
                label="AT过期时间">
            </el-table-column>
            <el-table-column
                prop="createTime"
                width="100px"
                label="创建时间">
            </el-table-column>
            <el-table-column
                prop="updateTime"
                width="100px"
                label="更新时间">
            </el-table-column>
            <el-table-column
                prop="status"
                :formatter="formatStatus"
                label="状态">
            </el-table-column>
            <el-table-column
                prop="cancelTime"
                label="取消时间">
            </el-table-column>
            <el-table-column
                prop="authCorpInfo"
                label="企业信息">
                <template v-slot="scope">
                    <table-popover :text=scope.row.authCorpInfo></table-popover>
                </template>
            </el-table-column>
            <el-table-column
                prop="authInfo"
                label="授权信息">
                <template v-slot="scope">
                    <table-popover :text=scope.row.authInfo></table-popover>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                fixed="right"
                width="80">
                <template v-slot="scope">
                    <div>
                        <el-button @click="onRefresh(scope.row)" type="text" size="small">刷新</el-button>
                        <el-button @click="onDelete(scope.row)" type="text" size="small">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            small
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="condition.page"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :page-size.sync="condition.rows"
            layout="sizes, prev, pager, next"
            :total.sync="condition.total">
        </el-pagination>
    </div>
</template>

<script>
import {deleteWorkCorpThirdApp, getWorkCorpThirdAppByPage, refreshWorkCorpThirdApp} from '@/api/api'
import TablePopover from "@/component/single/TablePopover";

export default {
    name: "work-corp-third",
    components: {TablePopover},
    data() {
        return {
            // 分页搜索条件
            condition: {
                page: 1,
                rows: 10,
                total: 0,
                search: {}
            },
            // 表格数据
            tableData: [],
            // 新增或者编辑对话框显示
            addOrUpdateDialogVisible: false,
            // 标题
            addOrUpdateDialogTitle: '新增',
            // 新增或者编辑对话框表单
            addOrUpdateForm: {},
            // 选中行
            selectedRow: {}
        }
    },
    // 这里定义需要父组件传过来的东西
    props: {
        workCorpId: String,
        size: {
            type: String,
            default: 'small'
        },
    },
    methods: {
        // 这里可以单独设置每一行的样式
        tableRowClassName({row, rowIndex}) {
            return '';
        },
        handleSizeChange(val) {
            this.getData();
        },
        handleCurrentChange(val) {
            this.getData();
        },
        formatType: function (row, column, cellValue) {
            if (cellValue == 'DAI') {
                return "代开发";
            } else if (cellValue == 'THIRD') {
                return "第三方";
            } else {
                return "未知";
            }
        },
        formatStatus: function (row, column, cellValue) {
            if (cellValue == 'CANCELLED') {
                return "已取消";
            } else if (cellValue == 'SUCCEED') {
                return "已授权";
            } else {
                return "未知";
            }
        },
        addOrUpdateConfirm: function () {
            if (this.addOrUpdateDialogTitle == '新增') {
                this.add();
            } else if (this.addOrUpdateDialogTitle == '编辑') {
                this.update();
            }
        },
        onRefresh: function (row) {
            this.$confirm('请确认是否刷新, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                refreshWorkCorpThirdApp({id: row.id}).then(data => {
                    if (data.respCode == 1000) {
                        this.$message({
                            type: 'success',
                            message: '刷新成功!'
                        });
                        this.getData();
                    } else {

                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        onDelete: function (row) {
            if (row.status === 'SUCCEED') {
                this.$message({
                    type: 'error',
                    message: '当前状态不允许删除'
                });
                return;
            }
            this.$confirm('请确认是否删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteWorkCorpThirdApp({id: row.id}).then(data => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getData();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        // 获取表格数据
        getData: function () {
            this.condition.search.workCorpId = this.workCorpId;
            getWorkCorpThirdAppByPage(this.condition).then(data => {
                this.tableData = data.body.rows;
                this.condition.total = data.body.total;
            })
        },
    },
    created() {
        this.getData();
    },
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}
</style>
